<template>
	<div class="my_l">
		<PersonalInfoHeaderView></PersonalInfoHeaderView>
		<div class="overflow_hidden padding_top45 background_fff padding_lf10_rg10">
			<div class="line_height60 overflow_hidden border_bot_dcdcdc position_rel">
				<div class="fl">
					头像
				</div>
				<div class="fr">
					<input @change="upLoadHeadPic" type="file" accept="image/*" multiple id="file" value="上传头像" />
					<img :src="root + personalInfo.HeadImg" id="showPic" class="head_pic" />
					<!--<img src="../assets/images/take_pic_icon.png" class="take_pic_btn" />-->

					<span>></span>
				</div>
			</div>
			<div class="line_height40 overflow_hidden border_bot_dcdcdc">
				<div class="fl">
					用户名
				</div>
				<div class="fr">
					{{personalInfo.UserName}}
				</div>
			</div>
			<div class="line_height40 overflow_hidden border_bot_dcdcdc">
				<div class="fl">
					性别
				</div>
				<div class="fr">
					保密>
				</div>
			</div>
			<div class="line_height40 overflow_hidden border_bot_dcdcdc">
				<div class="fl">
					出生日期
				</div>
				<div class="fr">
					>
				</div>
			</div>
			<div @click="SaveInfomation()" class="btn_bot bottom66">
				保存
			</div>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui';
	import PersonalInfoHeaderView from './PersonalInfoHeader.vue';
	export default {
		components: {
			PersonalInfoHeaderView,
		},
		created() {
		},
		data() {
			return {
				root: this.root + '/',
				personalInfo: {}
			}
		},
		mounted() {
			let _this = this
			_this.GetPersonalInfo()
		},
		methods: {
			GetPersonalInfo() {
				let _this = this
				_this.$http.get('/client/Members', null, localStorage.Authorization, res => {
					console.log('个人信息res', res)
					if(res.code === 200) {
						_this.personalInfo = res.data.list[0]
					}
				})
			},
			upLoadHeadPic() {
				let _this = this
				var file = document.getElementById("file").files[0];
				if(!/image\/\w+/.test(file.type)) {
					alert("这不是图片文件！请检查！");
					return false;
				}
				var reader = new FileReader();
				//将文件以Data URL形式读入页面
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					var result = this.result.split(',')[1]
					_this.$http.post('/admin/upload/base64', {
						base64: result,
						ext: 'jpg'
					}, localStorage.Authorization, res => {
						console.log('图片上传r', res)
						if(res.code == 200) {
							_this.personalInfo.HeadImg = res.data
						}
					})
				}
			},
			SaveInfomation() {
				let _this = this;
				console.log('_this.personalInfo.HeadImg', _this.personalInfo.HeadImg)
				_this.$http.put('/client/Members/:id', {
						HeadImg: _this.personalInfo.HeadImg,
					}, localStorage.Authorization, res => {
						console.log('保存图片res', res)
						if(res.code == 200) {
						}
					})
			}
		}
	}
</script>
<style>
	.head_pic {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		vertical-align: middle;
	}
	
	.take_pic_btn {
		position: absolute;
		right: 24px;
		top: 24px;
	}
	
	#file {
		position: absolute;
		right: 4px;
		height: 60px;
		width: 60px;
		z-index: 3;
		opacity: 0;
	}
</style>